<template>
  <Modal
    v-model:active="TetrahedronModalVueActive"
    transfer
    title="四面体"
    :width="480"
    :height="600"
    confirm-text="四面体剖分"
    @confirm="executeTetmeshCreate"
  >
    <NativeScroll use-y-bar height="100%" scroll-style="padding: 24px;">
      <Row :gap="[8]">
        <ConfigProvider :props="providedProps">
          <Form :model="formModel">
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">选择类型</div>
              </div>
            </Column>
            <Column :span="24">
              <FormItem prop="select">
                <Select v-model:value="value" :options="options"></Select>
              </FormItem>
            </Column>
            <Divider></Divider>
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">选择器</div>
              </div>
            </Column>
            <Column :span="18" :offset="6">
              <FormItem label="类型:" prop="select">
                <Select :options="typeOptions" v-model:value="value"></Select>
              </FormItem>
            </Column>
            <Divider></Divider>
            <Column :span="24">
              <div class="title">
                <div class="title_color"></div>
                <div class="title_content">参数</div>
              </div>
            </Column>
            <Column :span="18" :offset="6">
              <FormItem label="表面单元尺寸:">
                <Input
                  type="number"
                  class="w-100"
                  v-model:value="formModel.surfaceMeshOptions.meshSize"
                ></Input>
              </FormItem>
            </Column>
          </Form>
        </ConfigProvider>
      </Row>
    </NativeScroll>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Select,
  Divider,
  Form,
  FormItem,
  ConfigProvider,
  Input,
  NativeScroll,
  Row,
  Column,
  Toast,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
const coreStore = useCoreStore();

let { TetrahedronModalVueActive } = storeToRefs(coreStore);
const value = ref<number>(1);
const providedProps = {
  default: { clearable: true },
  formItem: { required: true },
};
let formModel = {
  curveMeshOptions: {
    alignment: 2, // 设置是否对齐
    enableProximity: 0, // 设置是否亲近
    refinementAngle: 45.0, // 设置加密角度
  },
  mesh2currentComp: 0, // 设置是否剖分当前组件
  meshType: "tetmesh",
  surfaceMeshOptions: {
    adaptiveCurvature: 0, // 设置是否自适应曲率
    elemType: "ETri", // 设置单元类型
    fixLeakOnly: 1, // 设置是否亲近
    fixShellMesh: 1,
    forceAFT: 0, // 设置是否强制使用FastAFT
    growthRatio: 1.05, // 设置增长率
    meshSize: Number(30.0),
    sizePriority: 1, // 设置尺寸优先级
  },
  tetraMesh: {
    allTet: 1,
  },
};
const options = [
  {
    label: "几何的四面体网格",
    value: 1,
  },
];
const typeOptions = [
  {
    label: "实体",
    value: 1,
  },
];

function executeTetmeshCreate() {
  Toast.loading({ content: "Tetmesh Create ~ ", duration: 0 });
  _global.Engine.tetmesh.create(formModel).then(() => {
    console.log("Tetmesh Finished ~ ");
    Toast.close();
  });
}
</script>

<style scoped lang="less">
:deep(.vxp-form) {
  display: flex;
  align-items: center;
}
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
